import React, { useState, useEffect } from 'react'
import { reqgetcate,reqgetgoods } from '../../http/api'
import "../Cate/Cate.less"

export default function Cate(props) {
  const [catelist, setcatelist] = useState([])
  const [goodslist, setgoodslist] = useState([])

  useEffect(() => {
    reqgetcate().then((res)=>{
      if(res.data.code === 200){
        setcatelist(res.data.list)
      }
    })
    reqgetgoods({fid:1}).then((res)=>{
      if(res.data.code === 200){
        setgoodslist(res.data.list)
      }
    })
  }, [])

  const goDetail=(id)=>{
    props.history.push("/detail?id="+id+"&type=1");
  }
  
  const changePage=(key)=>{
    reqgetgoods({fid:key}).then((res)=>{
      if(res.data.code === 200){
        setgoodslist(res.data.list)
      }
    })
  }

  return (
    <div className='cate-con'>
        <div className='left'>
          {catelist.map((item)=>{
            return(
              <p key={item.id} onClick={()=>changePage(item.id)}>{item.catename}</p>
            )
          })}
        </div>
        <div className='right'>
          {goodslist.map((item)=>{
            return(
                <div key={item.id} className='box' onClick={()=>goDetail(item.id)} >
                <div className='imgbox'>
                  <img src={'http://localhost:1000'+item.img} alt="" />
                </div>
                <div>
                  <p>{item.catename}</p>
                  <p>{item.price}</p>
                  <div>加入购物车</div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
  )
}

